import React, { useMemo, useRef } from "react";

import {ProTable, type TableType, type IProTableRef } from "@yaf/pro-ui";
import { EnumAuthKey, permission } from "@/service";
import { useThemeToken } from "@/constants";

import { getDataAction, filterItems } from './proTableDriver';
import { RespDataType } from '../api';
import { getClearLogBtn } from "./btns";

const List: React.FC = () => {
  const { themeToken } = useThemeToken();
  const proTableRef = useRef<IProTableRef>();
  const columns = useMemo(() => getColumns(), []);

  return (
    <ProTable
      ref={proTableRef}
      dataAction={getDataAction(proTableRef)}
      rowKey={"operId"}
      theme={themeToken.proTableToken}
      headerProps={{
        operatorProps: {
          btnList: [
            { innerType: "delete", authKey: EnumAuthKey.sysOperLog.removeButton },
            { ExtendComponent: getClearLogBtn(), authKey: EnumAuthKey.sysOperLog.clearButton }
          ].filter((item) => permission.can(item.authKey)),
        },
        filterProps: {
          maxWidth: "80%",
          filterItems
        }
      }}
      contentProps={{
        tableProps: {
          columns,
        }
      }}
      onError={(msg) => console.error(msg)}
    />
  )
}

export default List;

const getColumns = () => {
  // const statusToInfo = helper.convertArrayToObj(EnumStatus);
  // const businessTypeToInfo = helper.convertArrayToObj(EnumBusinessType);

  const columns: TableType.ColumnsType<RespDataType.OperLogItem> = [
    // {
    //   title: '操作序号',
    //   dataIndex: 'operId',
    // },
    {
      title: '操作模块',
      dataIndex: 'title',
      width: 100,
    },
    {
      title: '请求方式',
      dataIndex: 'requestMethod',
      width: 80,
    },
    {
      title: '操作人员',
      dataIndex: 'operName',
    },
    {
      title: '部门名称',
      dataIndex: 'deptName',
    },
    {
      title: '请求URL',
      dataIndex: 'operUrl',
      ellipsis: true,
    },
    {
      title: '操作地址',
      dataIndex: 'operIp',
      ellipsis: true,
    },
    {
      title: '操作地点',
      dataIndex: 'operLocation',
      ellipsis: true,
    },
    {
      title: '操作时间',
      dataIndex: 'operTime',
    }
  ];

  return columns;
}
